<!--
 * @Author: 郭建利
 * @Date: 2024-01-04 15:45:51
 * @LastEditors: 郭建利
 * @LastEditTime: 2024-01-04 17:12:22
 * @FilePath: \caivlecu\src\pages\otherCode\components\Detail.vue
-->
// ServicePanel.vue
<script setup lang="ts">
// 子调父
const emit = defineEmits<{
  (event: 'close'): void
}>()
</script>

<template>
  <view class="service-panel">
    <!-- 关闭按钮 -->
    <text class="close icon-close" @tap="emit('close')"></text>
    <!-- 标题 -->
    <view class="title">外销码详情</view>
    <!-- 内容 -->
    <view class="content">
      <view class="info">
        <view>发码商：内蒙古鄂尔多斯市东胜区三联超市</view>
        <view>日期：2020-12-20</view>
        <view>数量：5000</view>
      </view>
      <uni-list-item
        title="条码编号：454564FJJ"
        note="配送员：张三"
        rightText="状态：已配送"
        v-for="item in 5"
        :key="item"
      />
    </view>
  </view>
</template>

<style lang="scss">
.service-panel {
  padding: 0 20rpx;
  border-radius: 10rpx 10rpx 0 0;
  position: relative;
  background-color: #fff;
}

.title {
  line-height: 1;
  padding: 40rpx 0;
  text-align: center;
  font-size: 32rpx;
  font-weight: normal;
  border-bottom: 1rpx solid #ddd;
  color: #444;
}

.close {
  position: absolute;
  right: 40rpx;
  top: 40rpx;
}

.content {
  padding: 20rpx 0 50rpx 0;
  .info {
    padding: 0 15rpx 20rpx;
    display: flex;
    flex-wrap: wrap;
    view {
      font-size: 26rpx;
      line-height: 46rpx;
    }
    view:first-child {
      width: 100%
    }
    view:last-child {
      margin-left: 40px
    }
  }
}
</style>
